<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../libs/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- input -->
        <input type="text" v-model="msg">
        <h2>{{msg}}</h2>

        <!-- textarea -->
        <textarea v-model="textareaText"></textarea>
        <h2>{{textareaText}}</h2>

        <!-- 一个多选框 -->
        <input type="checkbox" id="One" v-model="checkboxText">
        <label for="One">label标签联动点击</label>
        <h2>{{checkboxText}}</h2>

        <!-- 多选框 -->
        <input type="checkbox" id="sleep" v-model="checkAllText" value="睡">
        <label for="sleep">睡觉</label>
        <input type="checkbox" id="movie" v-model="checkAllText" value="电">
        <label for="movie">电影</label>
        <input type="checkbox" id="game" v-model="checkAllText" value="游">
        <label for="game">打游戏</label>
        <br>
        <span>你的爱好：{{checkAllText}}</span>
        <br>

        <!-- 单选框 -->
        <input type="radio" id="female" v-model="radioText" value="female">
        <label for="female">女</label>
        <input type="radio" id="male" v-model="radioText" value="male">
        <label for="male">男</label>
        <br>
        <span>你的性别：{{radioText}}</span>

        <br>
        <!-- 下拉框 -->
        <select v-model="selected">
            <option value="">请选择</option>
            <!-- 这里的value要设置成动态 -->
            <option :value="item.value" v-for="(item,index) in cities" :key="i">{{item.label}}</option>
        </select>
        <span>你的选择是: {{selected}}</span>
        <br>

        <!-- 一个多选框真假显示不同东西 -->
        <!-- true-value和false-value是固定属性值 -->
        <input type="checkbox" v-model="toggle" :true-value="yes" :false-value="no">请选择
        <h2>Toggle={{toggle}}</h2>
    </div>
    

    <script>
        const vm = new Vue({
            data:{
                msg:'1212',
                textareaText:'textarea',
                checkboxText:false,
                checkAllText:[],
                radioText:'',
                selected:'',
                cities:[
                    {value:"WH",label:"武汉"},
                    {value:"BJ",label:"北京"},
                    {value:"SH",label:"上海"},
                    {value:"SZ",label:"深圳"},
                    {value:"GZ",label:"广州"},
                    {value:"XM",label:"厦门"},
                ],
                yes:'可以去原了！',
                no:'敲完代码才能原..',
                toggle:''
            },
            methods:{

            }
        }).$mount('#app')
    </script>
</body>
</html>